<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
    <title>计算属性-侦听器-watch,并加载图片</title>
</head>
<body>
<div id="app">
    <div>
        <p>
            Ask a yes/no question:
            <input type="text" v-model="question">
        </p>
        <p>
            {{answer}}
        </p>
        <span v-html="image"></span>
    </div>
</div>

<script>

    var app = new Vue({
        el: "#app",
        methods: {
            getAnswer: function () {
                console.log("getAnswer");//getAnswer
                var vm = this;
                axios.get("https://yesno.wtf/api")
                    .then((response) => {
                        console.log(response);//对象
                        console.log(response.data.answer);//yes or no
                        vm.answer = response.data.answer;
                        vm.image = "<img src='" + response.data.image + "'>";
                    })
                    .catch((error) => {
                        console.log(error);
                        vm.answer = "Error " + error;
                    })
            }
        },
        created: function () {
            this.dGetAnswer = _.debounce(this.getAnswer, 500)
        },
        watch: {
            question: function (newQ, oldQ) {
                console.log(newQ + " " + oldQ);
                this.answer = "Waiting for you to stop typing...";
                this.answer = "think.......";
                this.dGetAnswer();
            }
        },
        computed: {},
        data: {
            question: "",
            answer: "I cannot give you an answer until you ask a question!",
            image: "",
        }
    });
</script>
</body>
</html>
